<template>
	<div>
		<view-table
			:page="page"
			:page-size="pageSize"
			:page-total="tableData.pagination.total"
			@pageChange="onPageChange"
		>
			<template #titleBtn>
				<el-button type="primary" size="mini" @click="onAdd">
					新增
				</el-button>
			</template>
			<template #search>
				<el-form
					ref="form"
					size="mini"
					label-width="90px"
					:model="loadParams"
				>
					<el-form-item label="管理员昵称">
						<el-input
							v-model="loadParams.nickname"
							placeholder="请输入管理员昵称"
							@change="onSearch"
						></el-input>
					</el-form-item>
					<el-form-item label="管理员账号">
						<el-input
							v-model="loadParams.username"
							placeholder="请输入管理员账号"
							@change="onSearch"
						></el-input>
					</el-form-item>
					<el-form-item label="管理员状态">
						<el-select
							v-model="loadParams.status"
							@change="onSearch"
						>
							<el-option label="全部" value=""></el-option>
							<el-option
								v-for="item in statusList"
								:key="item.id"
								:label="item.title"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="管理员角色">
						<el-select v-model="loadParams.role" @change="onSearch">
							<el-option label="全部" value=""></el-option>
							<el-option
								v-for="item in $roles"
								:key="item.id"
								:label="item.title"
								:value="item.id"
							>
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</template>
			<el-table :loading="loading" :data="tableData.list">
				<el-table-column label="ID" prop="id"></el-table-column>
				<el-table-column
					label="管理员昵称"
					prop="nickname"
				></el-table-column>
				<el-table-column
					label="管理员账号"
					prop="username"
				></el-table-column>
				<el-table-column label="状态" prop="status">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							:active-value="1"
							:inactive-value="0"
							@change="onChangeStatus(scope.row)"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="角色" prop="role">
					<template slot-scope="scope">
						{{ roleText(scope.row.role) }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="created_at" width="160px">
					<template slot-scope="scope">
						{{ $utils.dateFormat(new Date(scope.row.created_at)) || "-" }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
							type="text"
							size="mini"
							@click="onEdit(scope.row)"
						>
							编辑
						</el-button>
						<el-button
							type="text"
							size="mini"
							@click="onReset(scope.row)"
						>
							重置密码
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</view-table>

		<el-dialog
			width="560px"
			center
			close-on-click-modal
			:visible.sync="showEdit"
		>
			<div class="title-name">
				{{ editParams.id ? "编辑" : "新增" }}
			</div>
			<el-form
				ref="editParams"
				size="mini"
				label-width="120px"
				:model="editParams"
			>
				<el-form-item label="管理员账号：" required>
					<el-input
						v-model="editParams.username"
						placeholder="请输入管理员账号"
						:disabled="!!editParams.id"
					></el-input>
				</el-form-item>
				<el-form-item label="管理员昵称：" required>
					<el-input
						v-model="editParams.nickname"
						placeholder="请输入管理员昵称"
					></el-input>
				</el-form-item>
				<el-form-item label="管理员角色：" required>
					<el-select v-model="editParams.role">
						<el-option
							v-for="item in $roles"
							:key="item.id"
							:label="item.title"
							:value="item.id"
						>
						</el-option>
					</el-select>
					<div class="tips" v-if="!editParams.id">
						默认密码为：123456
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button size="small" @click="showEdit = false">
					取消
				</el-button>
				<el-button size="small" type="primary" @click="onConfirm">
					确定
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import viewTable from "@components/viewTable";
import loadList from "@components/mixins/loadList";
export default {
	mixins: [loadList],
	components: {
		[viewTable.name]: viewTable,
	},
	data() {
		return {
			api: "adminList",
			loadParams: {
				nickname: "",
				username: "",
				status: "",
				role: "",
			},
			showEdit: false,
			editParams: {
				id: "",
				nickname: "",
				username: "",
				role: "",
			},
			statusList: [
				{
					id: 1,
					title: "正常",
				},
				{
					id: 0,
					title: "禁用",
				},
			],
		};
	},
	mounted() {
		this.loadListFn();
	},
	methods: {
		onAdd() {
			for (const key in this.editParams) {
				// 有默认值则使用默认值
				switch (key) {
					case "role":
						this.editParams[key] = this.$roles[0].id;
						break;
					default:
						this.editParams[key] = "";
						break;
				}
			}
			this.showEdit = true;
		},
		onEdit(value) {
			for (const key in this.editParams) {
				// 字段名不一致 或 需要特殊处理
				switch (key) {
					case "id":
						this.editParams[key] = value.id;
						break;
					default:
						this.editParams[key] = value[key];
						break;
				}
			}
			this.showEdit = true;
		},
		onConfirm() {
			if (this.verify()) {
				return;
			}
			let editParams = this.editParams,
				url = editParams.id ? "adminUpdate" : "adminAdd";
			this.$axios.post(url, editParams).then(() => {
				this.$message.success(editParams.id ? "修改成功" : "创建成功");
				this.loadListFn();
				this.showEdit = false;
			});
		},
		onChangeStatus(value) {
			this.$confirm(
				`此操作将更改账号【${value.username}】的状态，是否继续？`,
				"警告",
				{ type: "warning" }
			)
				.then(() => {
					this.$axios
						.post("adminUpdate", {
							id: value.id,
							status: value.status,
						})
						.then(() => {
							this.$message.success("状态更新成功!");
							this.loadListFn();
						})
						.catch(() => {
							value.status = value.status == 1 ? 2 : 1;
						});
				})
				.catch(() => {
					value.status = value.status == 1 ? 2 : 1;
				});
		},
		onReset(value) {
			this.$confirm(
				`此操作将重置账号【${value.username}】的密码, 是否继续?`,
				"提示",
				{ type: "warning" }
			)
				.then(() => {
					this.$axios
						.post("adminReset", { id: value.id })
						.then((res) => {
							let message = res
								? `重置成功，密码为：${res.password}`
								: "重置成功";
							this.$message.success(message);
						});
				})
				.catch(() => {});
		},
		verify() {
			let tips = this.$utils.verify(
				{
					username: ["请输入管理员账号"],
					nickname: ["请输入管理员昵称"],
					role: ["请选择管理员角色"],
				},
				this.editParams
			);
			if (tips) {
				return this.$message.error(tips) && true;
			}
			return false;
		},
		// 对应角色名称
		roleText(id) {
			const roles = this.$roles;
			for (let i = 0; i < roles.length; i++) {
				if (id === roles[i].id) {
					return roles[i].title;
				}
			}
			return "-";
		},
	},
};
</script>

<style lang="less" scoped>
@import url("~@assets/css/public.less");
</style>
